import React, { Component } from 'react'
import './index.scss'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
class Banner extends Component{
	constructor(props) {
		super(props);
		this.state = {
				loopList: this.props.loopList
		}
	}

	render() {
		return (
			<div id="banner">
					<div className="swiper-container-banner">
							<div className="swiper-wrapper">
									{
											this.state.loopList.map((item,index) =>
													<div className="swiper-slide" key={index} onClick={Banner.toUrl.bind(this,item.url)}>
															<img src={item.img} alt=""/>
															<p className="banner-title">{item.title}</p>
													</div>
											)
									}
							</div>
					</div>
			</div>
		)
	}

	componentDidMount() {
			new Swiper('.swiper-container-banner', {
					slidesPerView: 1.15,
					spaceBetween: -28,
					autoplay: {
							delay: 2500,
							disableOnInteraction: false,
					},
					loop: true,
					centeredSlides: true,
			});
	}

	static toUrl(url) {
			window.location.href = url
	}

}

export default Banner
